<template>
	<view class="fl-s-c p-r-30">
		<view class="w-1">
			<view class="money-box w-1 fr-b-c">
				<view class="fl-s-s">
					<view class="fm-ali" style="color: #e32d1d; font-size: 56rpx">{{ count_money }}</view>
					<view class="fm-ali" style="color: #999999; font-size: 24rpx">可提现到余额，{{ min_money }}元起提现</view>
				</view>
				<navigator v-if="count_money >= min_money && count_money > 0" class="fr-c tx-btn" @click="get_money">提现</navigator>
			</view>
			<view class="list-item fl-s-s"><b>返现明细：</b></view>
			<view class="list-item list-item-item fl-s-s" v-for="(item, index) in list" :key="index">
				<view class="w-1" style="color: #999999">
					<view class="li flex">
						<view class="">获得时间</view>
						<view class="">
							{{ item.createtime }}
						</view>
					</view>

					<view class="li flex">
						<view class="">可用时间</view>
						<view class="">
							{{ item.act_available_time }}
						</view>
					</view>
				</view>
				<view class="w-1 fs-30">
					<view style="color: #333333" class="flex">
						<view class="li">金额：</view>
						<view class="li">
							{{ item.amount }}
						</view>
					</view>
					<view class="fr-b-c li flex" style="color: #333333">
						<view>状态</view>
						<view style="color: #e64340" v-if="item.w_act_state == 0">已冻结</view>
						<view style="color: #1ebb37" v-if="item.w_act_state == 1">可提现</view>
						<view style="color: #000" v-if="item.w_act_state == 2">已提现</view>
						<view style="color: #818181" v-if="item.w_act_state == 3">已过期</view>
					</view>
				</view>
			</view>
		</view>

		<view class="m-t-250" v-if="nodata">
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			page: 1,
			size: 20,
			total: 0,
			list: [],
			count_money: 0,
			min_money: 0,
			nodata: false
		};
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getList(false);
	},
	onReachBottom() {
		if (this.list.length < this.total) {
			this.page++;
			this.getList();
		}
	},
	onLoad() {
		this.getList();
	},
	methods: {
		// 获取接口数据
		getList(loading = true) {
			this.$get({
				url: '/wanlshop/withdrawal/list',
				data: {
					type: 3,
					page: this.page,
					pageSize: 10
				},
				loading
			})
				.then((res) => {
					console.log(res);
					this.list = this.page == 1 ? res.data.data : [...this.list, ...res.data.data];
					this.total = res.data.page_total;
					this.count_money = res.data.all_price ? res.data.all_price : '0';
					this.min_money = res.data.min_money ? res.data.min_money : '0';
					this.nodata = !this.list.length;
				})
				.catch((err) => {
					console.log(err);
					this.list = [];
					this.total = 0;
					this.count_money = 0;
					this.min_money = 0;
					this.nodata = !this.list.length;
				});
		},
		get_money() {
			let t = this;
			t.$post({
				url: '/wanlshop/withdrawal/save',
				data: {
					amount: t.count_money,
					type: 3
				}
			}).then((res) => {
				console.log(res);
				t.getList();
				// window.location.reload();
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.list-item {
	padding: 28rpx 0;
	margin-top: 20rpx;
	/* border-bottom: 1rpx solid #F0F0F0; */
}

.li {
	font-size: 26rpx;
	font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
	font-weight: 400;
	color: #333333 !important;
	margin-top: 16rpx;
}

.list-item-item {
	width: 100%;
	padding: 32rpx 30rpx;
	background-color: #f4f4f4;
	border-radius: 16rpx;
}

.goodsImage {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-left: 48rpx;
}

.common_bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 284rpx;
}

.money-box {
	padding: 24rpx 0;
	border-bottom: 2rpx solid #f4f4f4;
}

.tx-btn {
	width: 152rpx;
	height: 80rpx;
	background: #fa360a;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-family: Alibaba;
	color: #ffffff;
}

.menu-item {
	border-bottom: 2rpx solid #f4f4f4;
	height: 96rpx;
	color: #000000;
	font-size: 28rpx;
	font-family: Alibaba;
}

.argee-btn {
	height: 100rpx;
	background: #fa360a;
	border-radius: 0rpx 0rpx 32rpx 32rpx;
	font-size: 32rpx;
	font-family: Alibaba;
	color: #ffffff;
}

>>> .u-count-num span {
	font-size: 32rpx !important;
	font-family: Alibaba !important;
	color: #ffffff !important;
}
.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
